<template>
  <div class="head">
    <van-nav-bar :title="$route.meta.title" fixed placeholder>
      <template #left>
        <van-icon name="arrow-left" color="#000" size="20" @click="doReturn" />
      </template>
      <template #right>
        <van-icon
          name="search"
          size="20"
          color="#000"
          style="margin-right: 20px"
        />
        <van-icon
          name="wap-nav"
          size="24"
          color="#000"
          @click="showShare = true"
        />
      </template>
    </van-nav-bar>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  computed: {},
  watch: {},

  methods: {
    doReturn() {
      this.$router.go(-1);
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    changeStyle() {
      let top = document.querySelector(".van-nav-bar__content");
      top.style.height = "60px";
      let title = document.querySelector(".van-nav-bar__title");
      title.style.fontSize = "18px";
      title.style.lineHeight = "18px";
    },
  },
  created() {},
  mounted() {
    this.changeStyle();
  },
  components: {},
};
</script>
<style scoped>
.van-nav-bar .van-nav-bar__title {
  font-size: 30px;
}
</style>
